<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 添加一些基本样式，仅作演示用途 */
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    form {
      max-width: 400px;
      margin: 0 auto;
    }

    fieldset {
      margin-bottom: 20px;
      padding: 10px;
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    button {
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- 
    HTML 中用于创建表单的主要标签包括：

1. **`<form>`：** 定义一个 HTML 表单，用于收集用户输入。

2. **`<input>`：** 用于创建多种不同类型的输入字段，例如文本框、密码框、单选框等。

3. **`<textarea>`：** 用于创建多行文本输入框。

4. **`<select>`：** 创建下拉菜单，通常与 `<option>` 元素一起使用。

5. **`<button>`：** 定义可点击的按钮，通常用于提交表单或执行 JavaScript 函数。

6. **`<label>`：** 用于标记表单元素，提高可访问性和用户体验。

7. **`<fieldset>`：** 将表单内的相关元素分组在一起，通常与 `<legend>` 元素一起使用。

8. **`<legend>`：** 为 `<fieldset>` 元素定义标题。

9. **`<input type="text">`：** 创建单行文本输入框。

10. **`<input type="password">`：** 创建密码输入框。

11. **`<input type="radio">`：** 创建单选框。

12. **`<input type="checkbox">`：** 创建复选框。

13. **`<input type="submit">`：** 创建提交按钮。

14. **`<input type="reset">`：** 创建重置按钮。

15. **`<input type="file">`：** 用于上传文件。

16. **`<input type="hidden">`：** 创建隐藏字段，通常用于在不显示给用户的情况下存储数据。

17. **`<input type="number">`：** 创建数字输入框。

18. **`<input type="email">`：** 创建电子邮件输入框。

19. **`<input type="url">`：** 创建URL输入框。

20. **`<input type="date">`：** 创建日期输入框。

21. **`<input type="time">`：** 创建时间输入框。

22. **`<input type="color">`：** 创建颜色选择框。
   -->

  <!-- 表单开始 -->
  <form action="/submit" method="post">

    <!-- 用户信息分组 -->
    <fieldset>
      <legend>用户信息</legend>

      <!-- 文本输入框 -->
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" placeholder="请输入用户名" required>

      <!-- 密码输入框 -->
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" placeholder="请输入密码" required>
    </fieldset>

    <!-- 个人信息分组 -->
    <fieldset>
      <legend>个人信息</legend>

      <!-- 单选框 -->
      <label>性别：</label>
      <label><input type="radio" name="gender" value="male"> 男性</label>
      <label><input type="radio" name="gender" value="female"> 女性</label>

      <!-- 复选框 -->
      <label>兴趣：</label>
      <label><input type="checkbox" name="interest" value="sports"> 运动</label>
      <label><input type="checkbox" name="interest" value="music"> 音乐</label>
    </fieldset>

    <!-- 地址信息分组 -->
    <fieldset>
      <legend>地址信息</legend>

      <!-- 下拉菜单 -->
      <label for="country">国家：</label>
      <select id="country" name="country">
        <option value="usa">美国</option>
        <option value="canada">加拿大</option>
        <option value="uk">英国</option>
      </select>

      <!-- 多行文本输入框 -->
      <label for="comments">评论：</label>
      <textarea id="comments" name="comments" rows="4" placeholder="请输入评论"></textarea>
    </fieldset>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
  </form>

</body>

</html>